<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./3.2.31/vue.js"></script>
		<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
			< script >
				function displayDate() {
					document.getElementById("demo").innerHTML = Date();
				}
		</script>
	</head>
	<body>
		<video width="320" height="240" controls>
			<source src="movie.mp4" type="video/mp4">
			<source src="movie.ogg" type="video/ogg">
			你的浏览器不支持 video 标签。
		</video>
		<p>函数可以存储在变量中:</p>
		<p id="functiondemo"></p>
		<p><strong>异步：</strong></p>
		<p id="demo1"></p>

		<h2>JavaScript 类</h2>

		<p>如何使用 JavaScript 类</p>

		<p id="democlass"></p>
		<script>
			var a = 222; {
				let a = 3333;
				document.write(a); // 3
			}
			document.write('<br>');
			document.write(a); // 2
			
			class Runoob {
				constructor(name, url) {
					this.name = name;
					this.url = url;
				}
			}

			let site = new Runoob("菜鸟教程", "http://www.runoob.com");
			document.getElementById("democlass").innerHTML =
				site.name + "：" + site.url;

			var x = function(a, b) {
				return a * b
			};
			document.getElementById("functiondemo").innerHTML = x;

			var xhr = new XMLHttpRequest();

			xhr.onload = function() {
				// 输出接收到的文字数据
				document.getElementById("demo1").innerHTML = xhr.responseText;
			}

			xhr.onerror = function() {
				document.getElementById("demo1").innerHTML = "请求出错";
			}

			// 发送异步 GET 请求
			xhr.open("GET", "http://www.runoob.com/try/ajax/ajax_info.txt", true);
			xhr.send();
			document.write("<h1>1</h1>");
			document.write("<p>2</p>");
		</script>
		<p id="demo">demo</p>
		<button type="button" onclick="displayDate()">DATE</button>
		<div id="counter">
			Counter: {{ counter }}
		</div>
		<div id="app">
			<p>Message {{ message }}</p>
		</div>
		<div id="my-app"></div>
		
		<div id="root1">
			<p>name {{ name }}</p>
		</div>
		<script type="text/javascript">
			const Counter = {
				data() {
					return {
						counter: 0
					}
				}
			}

			const Message = {
				data() {
					return {
						message: 0
					}
				}
			}
			Vue.createApp(Counter).mount('#counter')
			Vue.createApp(Message).mount('#app')
		
		</script>
	</body>
</html>
